<!DOCTYPE html>
<html>
<head>
<?php echo HTML::script('application/views/scripts/raphael-2.0.js'); ?>
<script>
var paper;
var time=0;
function createDraw()
{
	oldHeight=document.getElementById('presentation').offsetHeight;
	oldWidth=oldHeight*width/height;
//	pad=(document.getElementById('whole').offsetWidth-realWidth)/2;

//	document.getElementById('presentation').style.left=pad+"px";
//	document.getElementById('presentation').style.right=pad+"px";
	resizePaper();
	paper=new Raphael("presentation",realWidth,realHeight); // get width height of svg image
	paper.setViewBox(0,0,realWidth,realHeight);
	paper.canvas.style.zIndex=1;
	paper.canvas.style.height="100%";
	paper.canvas.style.width="100%";

}
var orix,oriy;
var height=<?php echo $height;?>,width=<?php echo $width;?>,pad,scaleHeight=1,scaleWidth=1,realHeight,realWidth,oldHeight,oldWidth;
function jumpPage(page)
{
	return function()
	{	
		paper.clear();
	
		document.getElementById('mySVG').data="/clec/application/media/<?php echo $id;?>/" + page + ".svg";
	}
}


function resizePaper(){

	realHeight=document.getElementById('presentation').offsetHeight;
	realWidth=realHeight*width/height;
	pad=(document.getElementById('whole').offsetWidth-realWidth)/2;

	scaleHeight=oldHeight/realHeight;
	scaleWidth=oldWidth/realWidth;

	document.getElementById('presentation').style.left=pad+"px";
	document.getElementById('presentation').style.right=pad+"px";
	document.getElementById('control-panel').style.width=pad+"px";
	document.getElementById('right-panel').style.width=pad+"px";
}
function draw(orix,oriy,x,y)
{
	
	return function() {
		paper.path("M" + Math.round(orix/width*oldWidth) + " " + Math.round(oriy/height*oldHeight) + "L" + Math.round(x/width*oldWidth) + " " + Math.round(y/height*oldHeight));		
	}
}
var data="<?php echo $data;?>";
function play()
{
	var sections=data.split("\n\n").slice(0,-1);	

	var lines,page,time;
	var x,y,orix,oriy;
	for(var i=0;i<sections.length;i++)
	{
		zdelim=sections[i].split("z\n");
		prefix=zdelim[0].split("\n");
		paths=zdelim.slice(1,-1); // array of paths
//alert(paths[0]);
		page=parseInt(prefix[1].slice(1));
		time=parseInt(prefix[2].slice(2));
		setTimeout(jumpPage(page),time);

		for(var u=0;u<paths.length;u++)
		{
			path=paths[u];
			lines=path.split("\n");
			for(var j=0;j<lines.length-1;j++)
			{
				orix=lines[j].slice(1).split(" ")[0];
				oriy=lines[j].slice(1).split(" ")[1];
				x=lines[j+1].slice(1).split(" ")[0];
				y=lines[j+1].slice(1).split(" ")[1];
				time=parseInt(lines[j+1].slice(1).split(" ")[2]);
				//	alert(orix+oriy+x+y+time);
				setTimeout(draw(orix,oriy,x,y),time);
			}
		}
	}
	document.getElementById('audio').play();
}

function stop()
{

}
function pause()
{

}
</script>
<style type="text/css">
div{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;

	border:1px solid blue;
}
#mySVG{
/*	display:block;*/
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:-1;
}
#whole{
	height:100%;
	width:100%;
}
#presentation{
	position:absolute;
	top:0;
	height:100%;
	left:100px;
	right:100px;

	border: 1px solid red;
	z-index:2;
}
#right-panel{
	position: absolute;
	top:0;
	right:0;
	background:#ccf;
}

#upload_target{
	display: none;
}
</style>
</head>
<body onload="createDraw()" onresize="resizePaper()">

<div id="whole">
	<div id="control-panel">
		<img src="/clec/application/views/pics/play.jpg" style="width:32px;" onclick="play()"/>
		<img src="/clec/application/views/pics/pause.jpg" style="width:32px;" onclick="pause()"/>
		<img src="/clec/application/views/pics/stop.jpg" style="width:32px;" onclick="stop()"/>
	</div>


	<div id="right-panel">
		<audio id="audio" controls style="display:none;">
			<source src="/clec/application/media/<?php echo $id;?>/recording.wav" type="audio/x-wav" />
		</audio>
	</div>

        <div id="presentation" >
	
        	<!--[if !IE]>-->
		<object data="/clec/application/media/<?php echo $id;?>/1.svg" type="image/svg+xml" id="mySVG" >
		<!--<![endif]-->

	        <!--[if lt IE 9]>
        	<object src="/clec/application/media/<?php echo $id;?>/1.svg" classid="image/svg+xml"
                	id="mySVG"> <![endif]-->
	        <!--[if gte IE 9]>
        	<object data="/clec/application/media/<?php echo $id;?>/1.svg" type="image/svg+xml"
                	id="mySVG"> <![endif]-->
		</object>

        </div>

</div>

</body>
</html>
